<template>
  <div>
    <el-image v-show="!loading&&handleSrc" :src="handleSrc" :fit="fit" @load="loading = false" v-bind="config">
      <template #error>
        <slot name="placeholder"></slot>
      </template>
    </el-image>
    <div class="father" v-if="loading || !handleSrc">
      <div class="empty"></div>
    </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  props: {
    src: {
      type: String
    },
    fit: {
      type: String,
      default: 'cover'
    },
    defaultSrc: {
      type:String,
      default(){
        return ''
      }
    },
    config: Object
  },
  // emits:['error'],
  setup(props) {
    const loading = ref(true)
    const handleSrc = computed(() => {
      if(!props.src) return props.defaultSrc
      if (/http/.test(props.src)) {
        return props.src
      } else {
        return process.env.VUE_APP_IMG_BASE + props.src
      }
    })
    return {
      loading,
      handleSrc
    }
  }
}
</script>

<style lang="scss" scoped>
.father {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .empty {
    width: 100%;
    height: 100%;
    background-color: rgba(153, 169, 191, 0.75);
    filter: blur(1px);
    transform: scale(1.2);
  }
}
</style>
